<template>
  <div class="mental-user pad">
    <div class="head">
      <span>知心意用户列表</span>
    </div>
    <div class="search-con m-t-b">
      <el-input
        v-model="searchText"
        placeholder="输入用户昵称搜索"
        clearable
        @input="clearSearch"
      >
        <el-button
          type="success"
          icon="el-icon-search"
          slot="append"
          @click="handleSearch"
        >
        </el-button>
      </el-input>
    </div>
    <el-table :data="userList" stripe border v-loading="userLoading" class="m-t-b">
      <el-table-column label="用户编号" prop="openId"></el-table-column>
      <el-table-column label="用户昵称" prop="nicname"></el-table-column>
      <el-table-column label="用户头像">
        <template slot-scope="scopes">
          <img :src="scopes.row.pic" class="u-avatar" />
        </template>
      </el-table-column>
      <el-table-column label="注册时间" prop="createDate"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scopes">
          <el-button
            type="text"
            size="mini"
            @click="lookMember(scopes.row)"
          >查看成员</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="m-t-b flex"
      :page-size="pageSize"
      layout="prev, pager, next"
      :current-page="curPage"
      @current-change="handlePagi"
      :total="userTotal"
    >
    </el-pagination>
  </div>
</template>
<script>
import {
  getUserByPage
} from '../api/hospitalAPI';
import { formatDate } from '../util';
export default {
  name: 'MentalUser',
  data () {
    return {
      searchText: '',
      pageSize: 10,
      userList: [],
      userLoading: true,
      curPage: 1,
      userTotal: 0
    }
  },
  methods: {
    fetchUserListByPage (index) { // 分页查询用户
      this.userLoading = true;
      getUserByPage({
        index,
        count: this.pageSize,
        queryParam: {
          nicname: this.searchText || null
        }
      })
      .then(res => {
        if (res.data.code === 1) {
          let list = res.data.data.list || [];
          this.userTotal = res.data.data.totalRecord || 0;
          list.forEach(item => {
            item.createDate = formatDate(item.createDate)
          });
          this.userList = list;
        } else {
          this.$message.error(res.data.msg || '服务异常!')
        };
        this.userLoading = false
      })
      .catch(e => {
        this.userLoading = false;
        this.$message.error('服务异常!')
      })
    },
    handlePagi (page) { // 分页事件
      this.curPage = page;
      this.fetchUserListByPage(page)
    },
    handleSearch () { // 搜索事件
      if (!this.searchText.trim()) {
        this.searchText = '';
        return this.$message.error('搜索内容不能为空!')
      };
      this.fetchUserListByPage(1)
    },
    clearSearch () { // 清除搜索
      if (!this.searchText.trim()) {
        this.fetchUserListByPage(1)
      }
    },
    lookMember ({ openId, nicname }) { // 查看成员
      this.$router.push(`/mental/user/${openId}/${nicname}`)
    }
  },
  created () {
    this.fetchUserListByPage(1)
  }
}
</script>
<style lang="scss">
  .mental-user {
    .u-avatar {
      width: 80px;
      height: 80px;
      border-radius: 6px;
    }
    .cell {
      text-align: center;
    }
  }
</style>
